import React, { useState, useEffect } from 'react';
import { Title } from 'base/ctl/title';
import { Time } from 'base/ctl/base';
import { d_sort, cline, uJob, useHigh, MaTable, NuiBt } from 'sui';
import { g_wsn } from 'db/state';
import { loc } from 'local';
import { PsnView } from './psn';

const PairView = ({ hreturn, mod, title }) => {
    const [main, setMain] = useState();
    const [cur, setCur] = useState();
    const [fin, setFin] = useState();
    const [high] = useHigh(130, 200)

    useEffect(() => {
        uJob(null, "pair/group",
            {
                line: cline(),
                k: mod,
            },
            r => {
                d_sort(r, "sn", true);
                setMain(r);
            }, e => setMain(null));
    }, [mod]);

    if (fin === "psn") {
        return <PsnView hreturn={() => setFin(null)} cur={cur} title={title} mod={mod}/>;
    }

    const hAction = (d, tp) => {
        setCur(d);
        setFin(tp);
    };

    const col = [
        {title: "工单号", field: 'sn', width: 120},
        {title: "型号", field: 'tech', width: 120},
        {title: loc("client_23"), field: 'e_opt', width: 240, render: d => {
            return (
                <div className="inline-flex items-center">
                    <NuiBt className="ml-8 h-16" color="green" hcmd={() => hAction(d, "psn")}>查看数据</NuiBt>
                </div>
            );
        }}
    ];

    return (
        <div className="flex flex-col ml-2 mr-2">
            <div className="inline-flex items-center justify-between mt-2 mb-2">
                <div className="inline-flex">
                    <Title label={loc("base_43")} value={g_wsn()} width="w-56"/>
                    <Title label={title} width="w-56"/>
                </div>
                <Time/>
                <div className="inline-flex">
                    <NuiBt name="log" className="h-16 mr-2" hcmd={hreturn}>返回</NuiBt>
                </div>
            </div>
            <MaTable col={col} row={main} title={loc("start_38")} page={8} paging={true}
            opt={{
                minBodyHeight: high - 50,
                maxBodyHeight: high - 50
            }}/>
        </div>
    );
};

export {PairView};
